<template>
  <div>
    <div class="recommends">
      <a
        class="item"
        :href="item.link"
        v-for="item in recommends"
        :key="item.id"
      >
        <img :src="item.image" alt="" />
        <div class="title">{{ item.title }}</div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    recommends: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  mounted() {
    // console.log(this.recommends);
  },
};
</script>

<style lang='less' scoped>
.recommends {
  display: flex;
  align-items: center;
  .item {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: center;
    color: #333;
    padding: 15px 0;
    border-bottom: 8px solid #eee;
    .title {
      margin-top: 10px;
    }
  }
  img {
    width: 60px;
    height: 60px;
  }
}
</style>